<template>
    <div class="container">
        <a-form :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }" :loading="loading">
            <a-form-item label="标题" style="margin-top: 30px;">
                <a-input v-decorator="['title', { rules: [{ required: true, message: '请输入文章标题！' }] }]" v-model="title"/>
            </a-form-item>
            <a-form-item label="分类" style="z-index: 9999;">
                <div style="display: flex; flex-direction: row;">
                    <a-button type="primary" @click="() => { this.newCategory.show = true }" :loading="newCategory.loading">新建分类</a-button>
                    <a-input v-show="newCategory.show" placeholder="请输入分类名" style="width: 300px; margin-left: 20px;" v-model="newCategory.name" :loading="newCategory.loading"></a-input>
                    <a-button v-show="newCategory.show" type="danger" style="margin-left: 20px;" @click="() => { this.newCategory.show = false; this.newCategory.name = ''; }" :loading="newCategory.loading">取消</a-button>
                    <a-button v-show="newCategory.show" type="primary" style="margin-left: 10px;" @click="newCategoryCommit" :loading="newCategory.loading">确定</a-button>
                </div>
                <a-select
                    v-decorator="[
                        'category',
                        { rules: [{ required: true, message: '请选择文章分类！' }] },
                    ]"
                    v-model="category"
                    style="margin-top: 20px;"
                >
                    <a-select-option v-for="(v, k) in categoryOptions" :key="k" :value="v.id">{{v.name}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="文章正文">
                <Editor
                    v-if="editor === 'mavon'"
                    :editorChange="editorChange"
                    :content.sync="content"
                ></Editor>
                <WangEditor
                    v-else
                    :editorChange="editorChange"
                    :content.sync="content"
                ></WangEditor>
            </a-form-item>
            <a-form-item label="url" style="margin-top: 30px;">
                <a-input v-model="url" placeholder="url 是为了更好的 SEO 效果，如果不填写，则使用文章 id"/>
            </a-form-item>
            <a-form-item label="创建日期" style="margin-top: 30px;">
                <a-date-picker
                    v-model="create_time"
                    locale="zh-CN"
                    valueFormat="YYYY-MM-DD"
                    placeholder="指定创建日期"
                    dropdownClassName="createTimeClassName"
                />
                <span style="color: gray; margin-left: 20px;">如果不指定创建日期，则默认为发布时间</span>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 2 }">
                <a-button type="primary" @click="onSubmitClick" :loading="loading">发布</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script>
import { getCategoryList, addCategory, addNewBlog, getBlogRow, saveBlog } from '../../../api/blog.js'
import Editor from '../../editor'
import WangEditor from '../../editor/WangEditor'
import { getSetting } from "../../../api/setting";

export default {
    name: 'Newblog',
    components: { Editor, WangEditor },
    data() {return {
        id: 0,
        title: '',
        categoryOptions: [],
        content: '',
        contentHtml: '',
        category: '',
        loading: false,
        url: '',
        newCategory: {
            show: false,
            name: '',
            loading: false
        },
        create_time: '',
        editor: 'mavon'
    }},
    created() {
        this.getOptions()
    },
    mounted() {
        const id = this.$route.query.id
        if (id) {
            this.loading = true
            getBlogRow({id: id}).then(res => {
                this.loading = false
                this.id = res.data.id
                this.category = res.data.category
                this.contentHtml = res.data.content_html
                this.content = res.data.content_md
                this.title = res.data.title
                this.url = res.data.url
                this.create_time = res.data.create_time
            }).catch(e => {
                this.loading = false
                this.$message.error(e.msg)
            })
        }

        getSetting({
            types: 'editor'
        }).then(res => {
            this.editor = res.data.find(v => v.type == 'editor').value || ''
        }).catch(e => {
            console.error(e);
            this.$message.error(e.msg || '暂未配置编辑器')
        })
    },
    methods: {
        /**
         * 获取分类
         */
        getOptions() {
            getCategoryList().then(res => {
                this.categoryOptions = res.data
                this.category = res.data[res.data.length - 1] ? res.data[res.data.length - 1].id : ''
            }).catch(e => {
                console.error(e);
                this.$message.error(e.msg)
            })
        },
        /**
         * 编辑器值变化回调
         * v 原文
         * h 解析后的 html
         */
        editorChange(v, h) {
            this.contentHtml = h
        },
        /**
         * 提交新建分类
         */
        newCategoryCommit() {
            this.newCategory.loading = true
            addCategory({name: this.newCategory.name}).then(res => {
                this.newCategory.loading = false
                this.getOptions()
                this.newCategory.show = false
            }).catch(e => {
                this.newCategory.loading = false
                this.$message.error(e.msg)
            })
        },

        /**
         * 发布按钮点击
         */
        onSubmitClick() {
            console.log(this.title, this.content, this.category, this.contentHtml);
            this.loading = true
            if (this.id > 0) {
                const data = {
                    id: this.id,
                    title: this.title,
                    content_md: this.content,
                    category: this.category,
                    content_html: this.contentHtml,
                    url: this.url ? this.url : ''
                }
                if (this.create_time) {
                    data.create_time = this.create_time
                }
                saveBlog(data).then(res => {
                    this.loading = false
                    this.$message.success('保存成功')
                    // setTimeout(() => {
                    //     openBlogPage(this.url ? this.url : res.data)
                    //     this.$router.push('/blog/blogs')
                    // }, 1000);
                }).catch(e => {
                    this.loading = false
                    this.$message.error(e.msg)
                })
            } else {
                const data = {
                    title: this.title,
                    content_md: this.content,
                    category: this.category,
                    content_html: this.contentHtml,
                    url: this.url ? this.url : ''
                }
                if (this.create_time) {
                    data.create_time = this.create_time
                }
                addNewBlog(data).then(res => {
                    this.loading = false
                    this.$message.success('发表成功')
                    // setTimeout(() => {
                    //     openBlogPage(this.url ? this.url : res.data)
                    //     this.$router.push('/blog/blogs')
                    // }, 1000);
                }).catch(e => {
                    this.loading = false
                    this.$message.error(e.msg)
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
}
</style>
<style>
.ant-calendar-prev-year-btn, .ant-calendar-prev-month-btn, .ant-calendar-next-month-btn, .ant-calendar-next-year-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
</style>



